<template>
  <view>
    <view class="status_bar"></view>
    <view class="search_good">
      <view class="flex search_key flex_col_center padding">
        <!-- #ifndef APP-PLUS -->
        <image
          v-if="from == 'goods'"
          src="../../static/image/voice.png"
          class="voice"
          @click="showPop()"
          mode=""
        >
        </image>
        <uni-icons class="" type="back" size="18" @click="navBack"></uni-icons>
        <!-- #endif -->
        <view class="search flex flex_col_center">
          <text class="custom-icon custom-icon-chazhao"></text>
          <input
            type="text"
            :value="value"
            @input="inputAction"
            :placeholder="placeholder"
            placeholder-class="twelve_font gray_font"
            class="search_input"
          />
        </view>
        <text v-if="value" class="cancel" @click="searchGood()">搜索</text>
        <text v-else class="cancel" @click="back">取消</text>
      </view>

      <view class="recommend_good" v-if="hiddenSearch">
        <view v-if="from == 'order'" class="all_good flex flex_row_between">
          <view
            v-for="item in dataList"
            :key="item.id"
            @click="toDetail(item.id)"
          >
            <my-orderlist :item="item" @clickbtn="btnAction"></my-orderlist>
          </view>
        </view>
        <view
          v-else-if="from == 'returnorder'"
          class="all_good flex flex_row_between"
        >
          <view
            class="order"
            v-for="item in dataList"
            :key="item.id"
            @click="toDetail(item.id)"
          >
            <my-returnorderlist
              :datas="item"
              @clickbtn="btnAction"
            ></my-returnorderlist>
          </view>
        </view>
        <view class="shopMotai" v-else-if="from == 'shop'" style="top: 0">
          <view class="shopBox">
            <view class="sort">
              <view>综合 </view>
              <view>销量</view>
              <view
                >价格 <image src="/static/images/-s-ic-fkfs.svg"></image
              ></view>
              <!-- <view
                >筛选 <image src="../../static/images/ic-saixuan.svg"></image
              ></view> -->
            </view>
            <!-- 商品搜索 -->
            <view
              class="shopBox-item"
              v-for="(item, index) in searchGoodsList"
              :key="index"
              @click="deleteInfo(item)"
            >
              <view class="shopBox-item-img">
                <image :src="item.img || '../../static/image/logo.jpg'"></image>
              </view>
              <view class="shopBox-item-content">
                <text class="shopBox-item-title">{{ item.name }}</text>
                <view class="shopBox-item-num row_between">
                  <view class="shopBox-item-num-price">
                    ￥<text class="num">{{
                      item.spu[0].market_price | zeros
                    }}</text>
                    <text class="spu">/{{ item.spu[0].spu_name }}</text>
                  </view>
                  <my-stepperr
                    v-if="item.spu.length == 1"
                    class="stepper_btn"
                    :val="item.willBuyNum"
                    :min="item.minimum"
                    :limit="item.designated_inventory"
                    :inventory="item.inventory_left"
                    :index="index"
                    @plus="addAction(item, index, $event)"
                    @minus="subAction"
                    @showKey="
                      $refs.keyboard.open(
                        item.is_standard,
                        index,
                        item.minimum,
                        item.inventory_left,
                        item.designated_inventory
                      )
                    "
                  >
                  </my-stepperr>
                  <view
                    v-else
                    class="icons"
                    @click.stop="addShop(index)"
                  ></view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else>
          <view v-for="(item, index) in dataList" :key="index">
            <my-listrow
              :datas="item"
              @showCart="$refs.cart.open(item)"
            ></my-listrow>
          </view>
        </view>
        <view
          v-if="dataList.length == 0 && searchGoodsList.length == 0"
          class="noData"
          >暂无结果</view
        >
      </view>

      <view v-else class="twelve_font record">
        <view class="search_history">
          <view class="old_search">
            <view>历史搜索</view>
            <image src="" style="width: 14px; height: 7px"></image>
          </view>
          <!-- <text>1111</text> -->
          <view class="flex wrap" v-if="from == 'order'">
            <text
              v-for="(item, index) in orderhistoryList"
              :key="index"
              @click="searchGood(item)"
              >{{ item }}</text
            >
          </view>
          <view class="flex wrap" v-if="from == 'business'">
            <text
              v-for="(item, index) in businesshistoryList"
              :key="index"
              @click="searchGood(item)"
              >{{ item }}</text
            >
          </view>
          <view class="flex wrap" v-else-if="from == 'returnorder'">
            <text
              v-for="(item, index) in returnorderhistoryList"
              :key="index"
              @click="searchGood(item)"
              >{{ item }}</text
            >
          </view>
          <view class="flex wrap" v-else>
            <text
              v-for="(item, index) in historyList"
              :key="index"
              @click="searchGood(item)"
              >{{ item }}</text
            >
          </view>
        </view>
      </view>

      <!-- 语音录入弹窗 -->
      <u-popup
        ref="speech"
        mode="bottom"
        v-model="showSpeech"
        :mask-close-able="false"
      >
        <view class="speech_box">
          <view class="head flex-btw">
            <text class="cancel" @click="closeSpeech(false)">取消</text>
            <image src="../../static/image/voice_on.png" mode=""></image>
            <text @click="closeSpeech(true)">确定</text>
          </view>
          <view class="wave flex-center">
            <!-- <button @longtap="longtapAction" @touchend="tapendAction" type="default">123</button>				 -->
            <view
              :class="[{ on: startSpeech }, 'voice_btn flex-center']"
              @longpress="longtapAction"
              @touchend="tapendAction"
            >
              <image
                v-if="startSpeech"
                class="img"
                src="../../static/image/voice_off.png"
                mode=""
              >
              </image>
              <view v-else class="push-txt">按住说话</view>
              <!-- <image  class="img" src="../../static/image/voice_on.png" mode=""></image> -->
              <!-- 加一层屏障，阻挡上面的图片，防止微信长按会弹出保存图片 -->
              <view class="film"></view>
            </view>
          </view>
        </view>
      </u-popup>

      <my-addcart ref="cart" :canshowprice="showPrice"></my-addcart>
    </view>

    <div v-show="showModalLog" class="modalLog">
      <div v-show="showLoading">
        <div v-if="goods_list.length > 0">
          <u-cell-item :arrow="false" @click="searchGood()">
            <template #title>
              <span class="highlightText">{{ searchVal }}</span>
            </template>
            <template #icon>
              <image
                style="width: 30rpx; height: 30rpx; margin-right: 30rpx"
                src="../../static/images/ic-jieguo.png"
              ></image>
            </template>
          </u-cell-item>
          <u-cell-item
            :arrow="false"
            v-for="(item, index) in goods_list"
            :key="index"
            @click="navTo(item)"
          >
            <template #title>
              <div
                class="title one_ellipsis"
                v-html="highlightText(item.company_details.company_name)"
              ></div>
            </template>
            <template #icon>
              <image
                style="width: 30rpx; height: 30rpx; margin-right: 30rpx"
                src="../../static/images/ic-sousu.png"
              ></image>
            </template>
          </u-cell-item>
          <!-- <div
            class="modalLog-box"
            v-for="(item, index) in goods_list"
            :key="index"
          >
            <div class="shop-box" @click="navTo(item)">
              <div class="shop-box-img">
                <image
                  :src="
                    'https://copartner.oss-cn-beijing.aliyuncs.com/' +
                      item.company_details.site_logo ||
                    '../../static/image/logo.jpg'
                  "
                >
                </image>
              </div>
              <div class="shop-box-info">
                <span class="title one_ellipsis">{{
                  item.company_details.company_name
                }}</span>
                <div class="collect">
                  <image
                    src="/static/images/yishoucang.png"
                    alt=""
                    style="width: 84rpx; height: 73rpx; border-radius: 10rpx"
                  />
                </div>
                <div class="tip">
                  <span class="tip-content one_ellipsis">{{
                    item.categorys || "暂无"
                  }}</span>
                  <span class="tip-sold"
                    >已售 {{ item.company_details.order_count || "0" }}</span
                  >
                </div>
                <div class="seg"></div>
                <div class="condition">
                  <div class="title time">
                    配送时间
                    <span class="times"
                      >{{ item.company_details.open_time | timeFilter }} -
                      {{ item.company_details.end_time | timeFilter }}</span
                    >
                  </div>
                  <div class="title money">
                    <span class="moneys"
                      >￥{{ item.company_details.starting_price || "0" }}</span
                    >起送
                  </div>
                </div>
                <div class="address">
                  <span class="address-info one_ellipsis"
                    >地址：{{
                      item.company_details.company_address || "暂无"
                    }}</span
                  >
                  <div
                    class="iphone"
                    @click.stop="call(item.company_details.site_phone)"
                  >
                    <image src="../../static/image/iphone.png"></image>
                  </div>
                </div>
              </div>
            </div>
          </div> -->
        </div>
        <div v-else class="souk">
          <img
            class="gifImages"
            src="../../static/loading/imgnull.png"
            alt=""
          />
          <span> 抱歉，没有找到公司哦</span>
        </div>
      </div>
      <div v-show="!showLoading">
        <img class="gifImage" src="../../static/loading/loading.png" alt="" />
      </div>
    </div>

    <div class="shopMotai" v-show="shopMotai">
      <div v-show="shopLoading">
        <div
          v-if="shop_goods_list.length > 0"
          class="shopBox"
          :style="shopLists"
        >
          <div class="sort">
            <div>综合</div>
            <div>销量</div>
            <div>价格 <image src="/static/images/-s-ic-fkfs.svg"></image></div>
            <!-- <div>
              筛选 <image src="../../static/images/ic-saixuan.svg"></image>
            </div> -->
          </div>
          <!-- 商品搜索 -->
          <!-- <div <div class="sort">
            <div>
              价格 <image src="../../static/images/-s-ic-fkfs.svg"></image>
            </div>
            <div>销量</div>
            <div>
              筛选 <image src="../../static/images/ic-saixuan.svg"></image>
            </div>
          </div>
          -->
          <!-- 商品搜索 -->
          <!-- <div
            class="shopBox-item"
            v-for="(item, index) in shop_goods_list"
            :key="index"
            @click="deleteInfo(item)"
          >
            <div class="shopBox-item-img">
              <image :src="item.img || '../../static/image/logo.jpg'"></image>
            </div>
            <div class="shopBox-item-content">
              <span class="shopBox-item-title">{{ item.name }}</span>
              <div class="shopBox-item-num row_between">
                <div class="shopBox-item-num-price">
                  ￥<span class="num">{{
                    item.spu[0].market_price | zeros
                  }}</span>
                  <span class="spu">/{{ item.spu[0].spu_name }}</span>
                </div>
                <div class="icons" @click.stop="addShop(index)"></div>
              </div>
            </div>
          </div> -->
          <!-- 单元格搜索 -->
          <u-cell-item :arrow="false" @click="searchGood()">
            <template #title>
              <span class="highlightText">{{ searchVal }}</span>
            </template>
            <template #icon>
              <image
                style="width: 30rpx; height: 30rpx; margin-right: 30rpx"
                src="/static/images/ic-jieguo.png"
              ></image>
            </template>
          </u-cell-item>
          <u-cell-item
            :arrow="false"
            v-for="(item, index) in shop_goods_list"
            :key="index"
            @click="deleteInfo(item)"
          >
            <template #title>
              <div
                class="title one_ellipsis"
                v-html="highlightText(item.name)"
              ></div>
            </template>
            <template #icon>
              <image
                style="width: 30rpx; height: 30rpx; margin-right: 30rpx"
                src="/static/images/ic-sousu.png"
              ></image>
            </template>
          </u-cell-item>

          <!-- <div
            class="shopBox-item"
            v-for="(item, index) in shop_goods_list"
            :key="index"
            @click="deleteInfo(item)"
          >
            <div class="shopBox-item-img">
              <image :src="item.img || '../../static/image/logo.jpg'"></image>
            </div>
            <span class="shopBox-item-title">{{ item.name }}</span>
            <div class="shopBox-item-num row_between">
              <div class="shopBox-item-num-price">
                ￥<span class="num">{{ item.spu | spuChange }}</span>
              </div>
              <div class="icons" @click.stop="addShop(index)">+</div>
            </div>
          </div> -->
        </div>
        <div v-else class="souk">
          <img
            class="gifImages"
            src="../../static/loading/imgnull.png"
            alt=""
          />
          <span> 抱歉，没有找到商品哦</span>
        </div>
      </div>
      <div v-show="!shopLoading">
        <img class="gifImage" src="../../static/loading/loading.png" alt="" />
      </div>
    </div>

    <my-addcart
      ref="minicart"
      :canshowprice="canshowprice"
      @tabBarTag="changeTabBarTag"
    ></my-addcart>
  </view>
</template>

<script>
import { debounce } from "@/utils/index.js";
import { mixins } from "@/mixins/judgment.js";
import { mapState } from "vuex";
// #ifdef H5
var wx = require("jweixin-module");
// #endif
// #ifdef MP-WEIXIN
var plugin = requirePlugin("WechatSI");
let manager = plugin.getRecordRecognitionManager();
// #endif

import { $https } from "@/static/js/request.js";
export default {
  mixins: [mixins],
  computed: {
    shopLists() {
      return {
        "--length": this.shop_goods_list.length,
      };
    },
    ...mapState(["companyInfo"]),
  },
  data() {
    return {
      from: "goods", //从哪里的搜索进来
      zid: "", //订单需要
      hiddenSearch: false,
      value: "",
      businesshistoryList: [],
      historyList: [],
      orderhistoryList: [],
      returnorderhistoryList: [],
      hotList: [],
      page: 1,
      count: null,
      dataList: [],
      showPrice: null,
      placeholder: "请输入要查询的商家名称..",
      haveConfig: false, //是否配置了微信（只需一次）
      showSpeech: false, //是否显示语音录入弹窗
      startSpeech: false, //开始录入

      canshowprice: false,

      searchVal: null,

      showModalLog: false, // 当输入框输入了商品后，展示该内容
      // 模态框内展示的内容
      goods_list: [],
      showLoading: false, // 加载中的动画
      searchGoodsList: [],
      shopMotai: false, // 搜索商品名称时的模态框
      shopLoading: false, // 搜索商品名称时的加载动画
      shop_goods_list: [], // 搜索商品名称时的列表数据信息
      company_id: 0, // 供应商id
    };
  },
  filters: {
    zeros(num) {
      return +num.toString().replace(/(\.[0-9]*[1-9])0+$/, "$1");
    },
  },
  onReady() {
    getApp().setTitle();
  },
  onLoad(options) {
    this.showPrice = uni.getStorageSync("canshowprice");
    this.from = options.from;
    if (options.from == "business") {
      this.placeholder = "请输入商家名称";
    } else if (options.from == "shop") {
      this.company_id = options.company_id;
      this.placeholder = "请输入查询的商品名称";
    } else if (options.from == "order") {
      this.placeholder = "请输入查询的订单号";
    } else if (options.from == "returnorder") {
      this.zid = options.zid != "null" ? options.zid : "";
      this.placeholder = "请输入查询的退货单号";
    }
  },
  onShow() {
    if (this.from == "order") {
      var orderhistoryList = uni.getStorageSync("orderhistoryList");
      this.orderhistoryList = orderhistoryList ? orderhistoryList : [];
    } else if (this.from == "returnorder") {
      var returnorderhistoryList = uni.getStorageSync("returnorderhistoryList");
      this.returnorderhistoryList = returnorderhistoryList
        ? returnorderhistoryList
        : [];
    } else if (this.from == "goods") {
      var historySearch = uni.getStorageSync("historySearch");
      this.historyList = historySearch ? historySearch : [];
    } else if (this.from == "business") {
      var business = uni.getStorageSync("business");
      this.businesshistoryList = business ? business : [];
    }
  },
  methods: {
    // 使用防抖等待500毫秒后获取数据
    inputAction: debounce(function (data) {
      var val = data.detail.value;
      this.searchVal = val;
      console.log("111", this.searchVal);
      // 当输入框有值时，将模态框展开；反之关闭
      if (val) {
        if (this.from == "business") {
          // 商品模态框打开
          this.showModalLog = true;
          // 加载功能打开
          this.showLoading = false;
          $https(
            "POST",
            "company",
            {
              name: val,
            },
            (res) => {
              if (res.data.errcode == 0) {
                this.goods_list = res.data.data;
                this.showLoading = true;
              } else {
                uni.showToast({
                  title: res.data.errmsg,
                  duration: 2000,
                });
              }
              this.hiddenSearch = false;
            }
          );
        } else if (this.from == "shop") {
          this.shopMotai = true;
          this.shopLoading = false;
          this.getShopInfo(1, this.company_id, val).then((res) => {
            this.shop_goods_list = res;
            this.shopLoading = true;
            this.hiddenSearch = false;
          });
        }
      } else {
        this.showModalLog = false;
        this.hiddenSearch = false;
      }
      this.value = val;
    }, 500),

    getData(page, value = this.value) {
      if (this.from == "order") {
        let params = {
          order_sn: value,
          page,
          size: 20,
        };
        this.zid &&
          Object.assign(params, {
            zid: this.zid,
          });
        $https("GET", "getOrderList", params, (res) => {
          var list = res.data.data.list;
          for (let i in list) {
            var ms = Number(list[i].created_at + "000");
            var now = new Date();
            now.setTime(ms);
            var date =
              now.getFullYear() +
              "-" +
              (now.getMonth() + 1) +
              "-" +
              now.getDate() +
              " " +
              now.getHours() +
              ":" +
              now.getMinutes() +
              ":" +
              now.getSeconds();
            list[i].createdTime = date;
          }
          this.dataList = this.dataList.concat(list);
          this.count = res.data.data.count;
          this.page = page;
        });
      } else if (this.from == "returnorder") {
        let params = {
          order_sn: value,
          page,
          size: 20,
        };
        this.zid &&
          Object.assign(params, {
            zid: this.zid,
          });
        $https("GET", "orderReturnList", params, (res) => {
          var list = res.data.data.list;
          for (let i in list) {
            var ms = Number(list[i].created_at + "000");
            var now = new Date();
            now.setTime(ms);
            var date =
              now.getFullYear() +
              "-" +
              (now.getMonth() + 1) +
              "-" +
              now.getDate() +
              " " +
              now.getHours() +
              ":" +
              now.getMinutes() +
              ":" +
              now.getSeconds();
            list[i].createdTime = date;
          }
          this.dataList = this.dataList.concat(list);
          this.count = res.data.data.count;
          this.page = page;
        });
      } else {
        $https(
          "GET",
          "goodsSearch",
          {
            name: value,
            page,
            size: 20,
          },
          (res) => {
            // this.showPrice = Boolean(res.data.data.look_goods_detail);
            var data = this.changePrice(res.data.data.goods_list);
            this.dataList = this.dataList.concat(data);
            this.count = res.data.data.count;
            this.page = page;
          },
          true
        );
        // $https('POST', 'company', {
        // 	category_name: value,
        // 	page,
        // 	size: 20
        // }, res => {
        // 	this.showPrice = Boolean(res.data.data.look_goods_detail);
        // 	// console.log(res)
        // 	var data = this.changePrice(res.data.data)
        // 	this.dataList = this.dataList.concat(data);
        // 	this.count = res.data.data.count;
        // 	this.page = page;
        // }, true)
      }
    },
    //处理价格规格sku
    changePrice(data) {
      var array = JSON.parse(JSON.stringify(data));
      for (let i in array) {
        //算出价格范围
        if (array[i].spu.length > 1) {
          var min, max;
          min = array[i].spu[0].market_price;
          if (array[i].spu[1].market_price < min) {
            max = Number(array[i].spu[0].market_price);
            min = Number(array[i].spu[1].market_price);
          } else {
            max = Number(array[i].spu[1].market_price);
            min = Number(array[i].spu[0].market_price);
          }
          for (let y in array[i].spu) {
            if (Number(array[i].spu[y].market_price) < min) {
              min = Number(array[i].spu[y].market_price);
            } else if (Number(array[i].spu[y].market_price) > max) {
              max = Number(array[i].spu[y].market_price);
            }
          }
          array[i].showPrice = `￥${min.toFixed(2)}~${max.toFixed(2)}`;
        } else if (array[i].spu.length == 1) {
          if (array[i].spu[0].activity_price) {
            //活动价
            array[i].showPrice = "￥" + array[i].spu[0].activity_price;
          } else if (array[i].spu[0].current_price == 1) {
            //是时价
            array[i].showPrice = "时价";
          } else {
            array[i].showPrice = "¥" + array[i].spu[0].market_price;
          }
          //只有一个规格时显示起订量、库存
          array[i].minimum = array[i].spu[0].minimum;
          array[i].designated_inventory = array[i].spu[0].designated_inventory;
          array[i].inventory_left = array[i].spu[0].inventory_left;
        }
        array[i].willBuyNum = array[i].num_cart_count;
      }
      return array;
    },

    searchGood(val) {
      // 查询供应商列表
      this.showModalLog = false;
      this.shopMotai = false;
      if (this.from == "business") {
        $https(
          "POST",
          "company",
          {
            name: this.value,
          },
          (res) => {
            if (res.data.errcode == 0) {
              this.dataList = res.data.data;
              this.hiddenSearch = true;
              return;
            } else {
              uni.showToast({
                icon: "none",
                title: res.data.errmsg,
              });
            }
          }
        );
      } else if (this.from == "shop") {
        $https(
          "GET",
          "goodsSearch",
          {
            name: this.value,
            page: 1,
            size: 20,
            company_id: this.company_id,
          },
          (res) => {
            if (res.data.errcode == 0) {
              console.log(res);
              this.searchGoodsList = this.changePrice(res.data.data.goods_list);
              this.hiddenSearch = true;
              return;
            } else {
              uni.showToast({
                icon: "none",
                title: res.data.errmsg,
              });
            }
          }
        );
      }
    },

    //订单详情
    toDetail(id) {
      uni.navigateTo({
        url: `/pages/order/detail?id=${id}`,
      });
    },
    //按钮事件
    btnAction(option) {
      var type = option.type,
        id = option.id,
        msg = option.msg;

      if (type == "getOrderDetail") {
        uni.navigateTo({
          url: `/pages/user/return_goods/return_list?id=${id}`,
        });
      }
      if (type == "toPay") {
        uni.navigateTo({
          url: `/pages/shopcart/pay_for?id=${id}`,
        });
      } else if (type == "getLogistics") {
        // #ifdef H5
        uni.navigateTo({
          url: `/pages/order/checkLog-h5?id=${id}`,
        });
        // #endif
        // #ifndef H5
        uni.navigateTo({
          url: `/pages/order/checkLog-wx?id=${id}`,
        });
        // #endif
      } else {
        uni.showModal({
          content: `是否${msg}`,
          confirmColor: "#4FA388",
          success: (res) => {
            if (res.confirm) {
              $https(
                "GET",
                type,
                {
                  oid: id,
                },
                (res) => {
                  console.log(res, "rrrr");
                  if (res.data.errcode == 0) {
                    if (type == "onceAgain") {
                      //如果是再来一单，直接跳转到购物车
                      uni.switchTab({
                        url: "/pages/tabar/shopcart",
                      });
                    } else {
                      this.getData(1);
                    }
                  } else {
                    uni.showToast({
                      title: res.data.errmsg,
                      icon: "none",
                    });
                  }
                }
              );
            } else if (res.cancel) {
            }
          },
        });
      }
    },
    showPop() {
      // #ifdef MP-WEIXIN
      this.showSpeech = true;
      // #endif
      // #ifndef MP-WEIXIN
      if (this.haveConfig) {
        this.showSpeech = true;
      } else {
        this.getWxConfig();
      }
      // #endif
    },
    closeSpeech(type) {
      if (type) {
        this.searchGood();
      } else {
        this.value = "";
      }
      this.showSpeech = false;
    },
    getWxConfig() {
      this.showSpeech = true;
      $https(
        "GETN",
        "wxConfig",
        {
          type: "default",
        },
        (res) => {
          if (res.data.errcode == 0) {
            this.haveConfig = true;
            wx.config({
              debug: false, // 开启调试模式
              appId: res.data.data.appId, // 必填，公众号的唯一标识
              timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
              signature: res.data.data.signature, // 必填，签名，见附录1
              jsApiList: [
                "startRecord",
                "stopRecord",
                "uploadVoice",
                "translateVoice",
              ], // 必填，需要使用的JS接口列表
            });
            this.showSpeech = true;
          } else {
            uni.showToast({
              icon: "none",
              title: "获取微信配置失败,请重试",
            });
          }
        },
        true
      );
    },
    //开始录音
    longtapAction() {
      this.startSpeech = true;
      // #ifndef MP-WEIXIN
      wx.startRecord();
      // #endif
      // #ifdef MP-WEIXIN
      manager.start();
      // #endif
    },
    //停止录音
    tapendAction() {
      this.startSpeech = false;
      // #ifndef MP-WEIXIN
      wx.stopRecord({
        success: (res) => {
          wx.translateVoice({
            localId: res.localId, // 需要识别的音频的本地Id，由录音相关接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: (result) => {
              // alert(result.translateResult); // 语音识别的结果
              // this.voiceResult = result.translateResult;
              this.value = result.translateResult.replace(/。/g, "");
            },
          });
        },
      });
      // #endif
      // #ifdef MP-WEIXIN
      manager.stop();
      var _this = this;
      manager.onStop = function (res) {
        _this.value = res.result.replace(/。/g, "");
      };
      // #endif
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
    navTo(item) {
      // console.log("222", item);
      let data = item.company_details.company_name;
      uni.setStorage({
        key: "business",
        data: data,
        success: function () {
          console.log("successdata");
        },
      });

      this.determine(item);
    },
    deleteInfo(info) {
      uni.navigateTo({
        url: `/pages/index/shopdetail?id=${info.id}&company_id=${this.company_id}`,
      });
    },
    addShop(index) {
      var data = this.shop_goods_list[index];
      this.$refs.minicart.open(data);
    },
    changeTabBarTag() {
      this.shopLoading = false;
      this.getShopInfo(1, this.company_id, this.searchVal).then((res) => {
        this.shop_goods_list = res;
        this.shopLoading = true;
        this.hiddenSearch = false;
      });
    },
    // 返回
    navBack() {
      if (this.from == "business") {
        uni.reLaunch({
          url: "/pages/tabar/index",
        });
      } else {
        uni.reLaunch({
          url: "/pages/shop/index",
        });
      }
    },
    highlightText(val) {
      // 跟搜索关键字一样的高亮
      const regex = new RegExp(this.searchVal, "g");
      return val.replace(regex, "<span class='highlightText'>$&</span>");
    },
    // +
    addAction(item, index, data) {
      console.log("11111", item, index, data);
      if (item.spu.length > 1) {
        this.showCart(index);
      } else {
        var index = data.index,
          min = data.min,
          limit = data.limit,
          inventory = data.inventory,
          val = data.value;
        if (val < min) {
          val = min;
        } else if (limit > 0 && val + 1 >= inventory) {
          //不能超过库存量
          val = inventory;
          uni.showToast({
            icon: "none",
            title: "库存不足",
          });
          return;
        } else {
          val++;
        }
        this.addToCart(
          this.searchGoodsList[index].id,
          this.searchGoodsList[index].spu[0].id,
          val.toFixed(2),
          index
        );
      }
    },
    // -
    subAction(data) {
      var index = data.index,
        min = data.min,
        inventory = data.inventory,
        val = data.value;

      if (val - 1 < min) {
        val = 0;
      } else {
        val--;
      }
      // this.goods_list[data.index].willBuyNum = val;
      this.addToCart(
        this.searchGoodsList[index].id,
        this.searchGoodsList[index].spu[0].id,
        val.toFixed(2),
        index
      );
    },

    //输入数量
    inputPrice(data) {
      var val = Number(data.value),
        index = data.index;
      this.addToCart(
        this.searchGoodsList[index].id,
        this.searchGoodsList[index].spu[0].id,
        val.toFixed(2),
        index
      );
    },
    addToCart(goodsId, spuId, num, index) {
      var options = {
        goods_id: goodsId,
        spu_id: spuId,
        num,
      };
      $https(
        "POSTN",
        `changeCart?company_id=${this.companyInfo.supplier_id}`,
        options,
        (res) => {
          if (res.data.errcode == 0) {
            this.searchGoodsList[index].willBuyNum = Number(num);
            // this.$refs.tabar.changetag(res.data.data.all_cart_num);
          } else {
            uni.showToast({
              title: res.data.errmsg,
              icon: "none",
            });
          }
        }
      );
    },
  },
  onReachBottom() {
    var page = this.page;
    //如果请求到底就请求下一列表
    if (this.dataList.length < this.count) {
      page++;
      this.getData(page);
    } else {
      this.bottomText = "没有更多啦~";
    }
  },
};
</script>

<style scoped lang="scss">
$length: var(--length) / 2;
$bg_white: #fff;

.sort {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 90rpx;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  image {
    width: 15rpx;
    height: 18rpx;
    margin-left: 14rpx;
  }
}

/deep/.highlightText {
  color: #40ae36;
}

/deep/.u-cell {
  padding: 10rpx 30rpx;
}
/deep/.u-drawer {
  overflow: unset !important;
}

.search_good {
  min-height: calc(100vh - 100rpx);
  // background-color: #ffffff;

  .old_search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20rpx 0 40rpx 0;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  .wrap {
  }

  .noData {
    width: 100%;
    text-align: center;
    line-height: 80rpx;
  }

  .voice {
    width: 30rpx;
    height: 38rpx;
    margin-right: 20rpx;
  }

  .search_key {
    position: fixed;
    // #ifndef MP-WEIXIN
    top: var(--status-bar-height);
    // #endif
    // #ifdef MP-WEIXIN
    top: 0;
    // #endif
    left: 0;
    right: 0;
    background: #f8f9fa;
    z-index: 9;
    height: 100rpx;
    // border-bottom: 1rpx solid #e1e1e1;
    justify-content: space-between;

    .cancel {
      margin-left: 26rpx;
      color: black;
    }

    .search {
      background-color: #ffffff;
      border-radius: 40rpx;
      width: 74%;

      .search_input {
        padding-right: 20rpx;
        font-size: 28rpx;
      }
    }

    .custom-icon-chazhao {
      padding: 0 18rpx 0 38rpx;
    }

    .custom-icon-jiantou2 {
      font-weight: bold;
      color: black;
      margin-right: 40rpx;
      font-size: 40rpx;
    }

    .custom-icon-gouwu {
      color: #a3a3a3;
      font-size: 40rpx;
      margin-left: 36rpx;
    }

    input {
      height: 60rpx;
    }
  }

  .recommend_good {
    // #ifndef MP-WEIXIN
    margin-top: calc(var(--status-bar-height) + 100rpx);
    // #endif
    // #ifdef MP-WEIXIN
    margin-top: 100rpx;
    // #endif
    // margin-bottom: 40rpx;

    .order {
      width: 100%;
      padding: 0 20rpx;
      border-radius: 10rpx;
      background: #fff;

      & + .order {
        margin-top: 20rpx;
      }
    }
  }

  .record {
    // padding-top: calc(var(--status-bar-height) + 150rpx);
    padding: 120rpx 20rpx 0;
  }

  .record text {
    background: #f3f3f3;
    border-radius: 24rpx;
    padding: 6rpx 28rpx;
    margin: 12rpx 20rpx 0 0;
  }

  .hot_search {
    margin-top: 96rpx;
  }

  .speech_box {
    background: #fff;
    height: 600rpx;
    display: flex;
    flex-direction: column;

    .head {
      color: #4fa388;
      font-size: 28rpx;
      padding: 32rpx 44rpx;

      image {
        width: 34rpx;
        height: 46rpx;
      }

      .cancel {
        color: #cacaca;
      }
    }

    .wave {
      flex: 1;

      .voice_btn {
        position: relative;
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
        border: 1px solid #4fa388;
        background: #fff;
        box-shadow: 0rpx 0rpx 30rpx #4fa388;

        &.on {
          background: #4fa388;
          box-shadow: 0rpx 0rpx 30rpx #999;
        }

        .img {
          width: 60rpx;
          height: 80rpx;
        }

        .push-txt {
          color: #4fa388;
          font-size: 16px;
          text-align: center;
          letter-spacing: 1px;
          width: 100rpx;
        }

        .film {
          position: absolute;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.modalLog {
  width: 100%;
  height: calc(100vh - 101rpx);
  // background: rgb(255, 255, 255);
  background: #ffffff;
  position: absolute;
  top: 101rpx;
  z-index: 9;

  // .shop-box {
  //   width: calc(100% - 46rpx);
  //   padding: 29rpx 29rpx 29rpx 19rpx;
  //   background-color: #fff;
  //   display: flex;
  //   flex-direction: row;
  //   justify-content: flex-start;
  //   align-items: center;
  //   margin-bottom: 10rpx;

  //   &-img {
  //     width: 162rpx;
  //     height: 162rpx;
  //     border-radius: 10rpx;
  //     padding: 20rpx;

  //     image {
  //       width: 100%;
  //       height: 100%;
  //     }
  //   }

  //   &-info {
  //     width: calc(100% - 48rpx - 9rpx - 180rpx);
  //     display: flex;
  //     flex-direction: column;
  //     justify-content: space-around;
  //     margin-left: 9rpx;
  //     height: 202rpx;

  //     .title {
  //       width: 100%;
  //       font-size: $font_2;
  //       font-weight: 600;
  //       font-family: PingFangSC-Medium, PingFang SC;
  //       color: #333;
  //     }

  //     .tip {
  //       width: 100%;
  //       display: flex;
  //       flex-direction: row;
  //       justify-content: space-between;
  //       align-items: center;

  //       &-content {
  //         font-size: $font_4;
  //         font-family: PingFangSC-Regular, PingFang SC;
  //         font-weight: 400;
  //         color: #656565;
  //         width: 300rpx;
  //       }

  //       &-sold {
  //         width: 130rpx;
  //         font-size: $font_4;
  //         font-family: PingFangSC-Regular, PingFang SC;
  //         font-weight: 400;
  //         color: #656565;
  //         white-space: nowrap;
  //         text-align: right;
  //       }
  //     }

  //     .seg {
  //       width: 100%;
  //       height: 1rpx;
  //       background-color: #e5e5e5;
  //     }

  //     .condition {
  //       display: flex;
  //       flex-direction: row;
  //       justify-content: space-between;
  //       align-items: center;
  //       width: 100%;

  //       .title {
  //         font-size: 24rpx;
  //         font-family: PingFangSC-Regular, PingFang SC;
  //         font-weight: 400;
  //         color: #656565;
  //         white-space: nowrap;
  //       }

  //       .time {
  //         padding: 6rpx 10rpx;
  //         background-color: #fff5e7;
  //         width: 260rpx;
  //       }

  //       .times {
  //         color: #d75131;
  //         margin-left: 10rpx;
  //       }

  //       .money {
  //         width: 160rpx;
  //         text-align: right;
  //       }

  //       .moneys {
  //         color: #d75131;
  //         margin-right: 10rpx;
  //       }
  //     }

  //     .address {
  //       display: flex;
  //       flex-direction: row;
  //       justify-content: space-between;
  //       align-items: center;
  //       width: 100%;

  //       &-info {
  //         width: 380rpx;
  //         font-size: 24rpx;
  //         font-family: PingFangSC-Regular, PingFang SC;
  //         font-weight: 400;
  //         color: #656565;
  //       }

  //       .iphone {
  //         width: 38rpx;
  //         height: 38rpx;
  //         display: flex;
  //         justify-content: center;
  //         align-items: center;

  //         image {
  //           width: 80%;
  //           height: 80%;
  //         }
  //       }
  //     }
  //   }
  // }
  .shop {
    width: 100%;
    position: relative;

    &-box {
      width: calc(100%);
      height: 220rpx;
      box-sizing: border-box;
      margin: 20rpx 0 20rpx 0;
      // padding: 20rpx 0 20rpx 0;
      background-color: #ffffff;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      // margin-bottom: 10rpx;

      &-img {
        width: 180rpx;
        height: 180rpx;
        border-radius: 10rpx;
        padding: 20rpx;
        margin-left: 20rpx;
        // width: 180rpx;
        // height: 180rpx;
        // background: #ffffff;
        // border: 1px solid #dcdcdc;
        // border-radius: 10rpx;

        image {
          width: 100%;
          height: 100%;
          background: #ffffff;
          border: 1px solid #dcdcdc;
          border-radius: 10rpx;
        }
      }

      &-info {
        // width: calc(100% - 48rpx - 9rpx - 180rpx);
        width: 450rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 9rpx;
        height: 165rpx;

        .collect {
          position: absolute;
          top: 20rpx;
          right: 0rpx;
          width: 84rpx;
          height: 73rpx;
          // background-image: url("../../static/images/yishoucang.png");
        }

        .title {
          width: 100%;
          font-size: 26rpx;
          font-weight: 600;
          font-family: PingFangSC-Medium, PingFang SC;
          color: #333;
        }

        .tip {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;

          &-content {
            font-size: 18rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #656565;
            width: 300rpx;
          }

          &-sold {
            width: 130rpx;
            font-size: 18rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #656565;
            white-space: nowrap;
            text-align: right;
          }
        }

        .seg {
          width: 100%;
          height: 1rpx;
          background-color: #e5e5e5;
        }

        .condition {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          width: 100%;

          .title {
            font-size: 18rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #656565;
            white-space: nowrap;
          }

          .time {
            // padding: 6rpx 10rpx;
            padding-left: 14rpx;
            background-color: #fff5e7;
            width: 210rpx;
            height: 30rpx;
          }

          .times {
            color: #d75131;
            margin-left: 10rpx;
          }

          .money {
            width: 160rpx;
            text-align: right;
          }

          .moneys {
            color: #d75131;
            margin-right: 10rpx;
          }
        }

        .address {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          width: 100%;

          &-info {
            width: 380rpx;
            font-size: 18rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #656565;
          }

          .iphone {
            width: 23rpx;
            height: 23rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            image {
              width: 80%;
              height: 80%;
            }
          }
        }
      }
    }
  }
}

.souk {
  display: flex;

  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 320rpx;

  .gifImages {
    width: 250rpx;
    height: 250rpx;
    margin: 0 center;
  }
  span {
    margin-top: 50rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }
}

.shopMotai {
  width: 100%;
  height: calc(100vh - 101rpx);
  background: #ffffff;
  position: absolute;
  top: 101rpx;
  z-index: 1;
  .shopBox {
    // display: grid;
    // grid-template-columns: repeat(2, 1fr);
    // grid-template-rows: repeat($length, 300rpx);
    // margin-top: 20rpx;
    // gap: 20rpx;
    // padding: 0 20rpx;

    &-item {
      // border-radius: 20rpx;
      background-color: #fff;
      display: flex;
      padding: 10rpx 30rpx;
      box-sizing: border-box;
      justify-content: space-between;
      &-img {
        width: 200rpx;
        height: 200rpx;
        margin-right: 40rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }

      &-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      &-title {
        width: 100%;
        padding: 0 20rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        display: inline-block;
        white-space: pre-wrap;
        margin: 20rpx auto 0;
        box-sizing: border-box;
      }

      &-num {
        width: 100%;
        align-items: center;
        padding: 0 20rpx 20rpx;
        margin: 20rpx auto 0;
        box-sizing: border-box;
        &-price {
          font-size: 22rpx;
          color: #f55726;
          font-family: PingFang SC;
          font-weight: bold;
          .num {
            font-size: 32rpx;
          }
          .spu {
            font-size: 22rpx;
            color: #999999;
            font-weight: bold;
          }
        }

        .icons {
          width: 50rpx;
          height: 50rpx;
          background-color: #12a38c;
          text-align: center;
          background-image: url("../../static/images/gouwuche2.png");
          background-size: 100% 100%;
          border-radius: 40rpx;
        }
      }
    }
  }
}

.gifImage {
  width: 100%;
  height: 1220rpx;
}
</style>
